<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 文本标签</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            color: #333;
        }
        h1 {
            color: #0066cc;
            border-bottom: 2px solid #0066cc;
            padding-bottom: 10px;
        }
        h2 {
            color: #0099cc;
            margin-top: 30px;
        }
        h3 {
            color: #00aadd;
        }
        .example {
            background-color: #f5f5f5;
            border-left: 4px solid #0066cc;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .code {
            background-color: #f8f8f8;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 15px;
            margin: 15px 0;
            overflow-x: auto;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        .note {
            background-color: #ffffd9;
            border-left: 4px solid #ffcc00;
            padding: 15px;
            margin: 20px 0;
            border-radius: 0 4px 4px 0;
        }
        .preview {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 15px 0;
            border-radius: 4px;
            background-color: #fff;
        }
        nav {
            background-color: #f8f8f8;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        nav a {
            margin-right: 15px;
            text-decoration: none;
            color: #0066cc;
        }
        nav a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <nav>
        <a href="html5-basic-structure.html">基础结构</a>
        <a href="html5-text-tags.html">文本标签</a>
        <a href="html5-links-images.html">链接和图像</a>
        <a href="html5-lists.html">列表</a>
        <a href="html5-tables.html">表格</a>
        <a href="html5-forms.html">表单</a>
        <a href="html5-semantic-tags.html">语义化标签</a>
        <a href="html5-multimedia.html">多媒体标签</a>
    </nav>

    <h1>HTML5 文本标签</h1>
    
    <section>
        <h2>标题标签</h2>
        <div class="example">
            <h3>示例：</h3>
            <div class="code">
                &lt;h1&gt;一级标题&lt;/h1&gt;<br>
                &lt;h2&gt;二级标题&lt;/h2&gt;<br>
                &lt;h3&gt;三级标题&lt;/h3&gt;<br>
                &lt;h4&gt;四级标题&lt;/h4&gt;<br>
                &lt;h5&gt;五级标题&lt;/h5&gt;<br>
                &lt;h6&gt;六级标题&lt;/h6&gt;
            </div>
            
            <div class="preview">
                <h1 style="font-size: 2em; margin: 0.67em 0;">一级标题</h1>
                <h2 style="font-size: 1.5em; margin: 0.83em 0;">二级标题</h2>
                <h3 style="font-size: 1.17em; margin: 1em 0;">三级标题</h3>
                <h4 style="font-size: 1em; margin: 1.33em 0;">四级标题</h4>
                <h5 style="font-size: 0.83em; margin: 1.67em 0;">五级标题</h5>
                <h6 style="font-size: 0.67em; margin: 2.33em 0;">六级标题</h6>
            </div>
            
            <h3>使用说明：</h3>
            <ul>
                <li><strong>&lt;h1&gt;</strong> 通常用于页面的主标题，每个页面应该只有一个 h1</li>
                <li><strong>&lt;h2&gt;</strong> 到 <strong>&lt;h6&gt;</strong> 用于表示不同层级的子标题</li>
                <li>标题标签有助于 SEO 和页面结构化</li>
                <li>应按层级顺序使用标题标签，不要跳级（如从 h1 直接到 h3）</li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>段落和文本格式化</h2>
        <div class="example">
            <h3>段落标签</h3>
            <div class="code">
                &lt;!-- 段落 --&gt;<br>
                &lt;p&gt;这是一个段落。&lt;/p&gt;<br><br>
                
                &lt;!-- 换行 --&gt;<br>
                &lt;p&gt;这是第一行&lt;br&gt;这是第二行&lt;/p&gt;<br><br>
                
                &lt;!-- 水平线 --&gt;<br>
                &lt;hr&gt;
            </div>
            
            <div class="preview">
                <p>这是一个段落。</p>
                
                <p>这是第一行<br>这是第二行</p>
                
                <hr>
            </div>
        </div>
        
        <div class="example">
            <h3>文本格式化标签</h3>
            <div class="code">
                &lt;p&gt;&lt;strong&gt;粗体文本&lt;/strong&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;em&gt;斜体文本&lt;/em&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;mark&gt;高亮文本&lt;/mark&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;del&gt;删除线文本&lt;/del&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;ins&gt;下划线文本&lt;/ins&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;sub&gt;下标&lt;/sub&gt;和&lt;sup&gt;上标&lt;/sup&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;small&gt;小号文本&lt;/small&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;code&gt;代码文本&lt;/code&gt;&lt;/p&gt;<br>
                &lt;p&gt;&lt;pre&gt;预格式化文本，
    保留空格和换行&lt;/pre&gt;&lt;/p&gt;
            </div>
            
            <div class="preview">
                <p><strong>粗体文本</strong></p>
                <p><em>斜体文本</em></p>
                <p><mark>高亮文本</mark></p>
                <p><del>删除线文本</del></p>
                <p><ins>下划线文本</ins></p>
                <p>X<sub>下标</sub>和X<sup>上标</sup></p>
                <p><small>小号文本</small></p>
                <p><code>代码文本</code></p>
                <p><pre>预格式化文本，
    保留空格和换行</pre></p>
            </div>
            
            <h3>使用说明：</h3>
            <ul>
                <li><strong>&lt;p&gt;</strong> 用于定义段落</li>
                <li><strong>&lt;br&gt;</strong> 用于在不开始新段落的情况下换行</li>
                <li><strong>&lt;hr&gt;</strong> 用于创建水平分隔线</li>
                <li><strong>&lt;strong&gt;</strong> 表示重要文本，通常显示为粗体</li>
                <li><strong>&lt;em&gt;</strong> 表示强调文本，通常显示为斜体</li>
                <li><strong>&lt;mark&gt;</strong> 用于高亮显示文本</li>
                <li><strong>&lt;del&gt;</strong> 表示已删除的文本</li>
                <li><strong>&lt;ins&gt;</strong> 表示插入的文本</li>
                <li><strong>&lt;sub&gt;</strong> 和 <strong>&lt;sup&gt;</strong> 分别用于下标和上标</li>
                <li><strong>&lt;small&gt;</strong> 用于较小的文本</li>
                <li><strong>&lt;code&gt;</strong> 用于显示代码片段</li>
                <li><strong>&lt;pre&gt;</strong> 用于预格式化文本，保留空格和换行</li>
            </ul>
        </div>
        
        <div class="note">
            <p><strong>注意：</strong> 文本格式化标签应根据语义使用，而不仅仅是为了视觉效果。例如，使用 &lt;strong&gt; 表示重要内容，而不仅仅是为了让文本变粗。</p>
        </div>
    </section>
    
    <section>
        <h2>引用和术语定义</h2>
        <div class="example">
            <h3>引用标签</h3>
            <div class="code">
                &lt;!-- 块引用 --&gt;<br>
                &lt;blockquote&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;这是一段长引用文本。引用某人说的话或者其他来源的内容。<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;cite&gt;——引用来源&lt;/cite&gt;<br>
                &lt;/blockquote&gt;<br><br>
                
                &lt;!-- 行内引用 --&gt;<br>
                &lt;p&gt;&lt;q&gt;这是一个短引用&lt;/q&gt;，通常用于行内引用。&lt;/p&gt;
            </div>
            
            <div class="preview">
                <blockquote style="margin: 1em 40px; border-left: 5px solid #ccc; padding-left: 15px;">
                    这是一段长引用文本。引用某人说的话或者其他来源的内容。
                    <cite>——引用来源</cite>
                </blockquote>
                
                <p><q>这是一个短引用</q>，通常用于行内引用。</p>
            </div>
        </div>
        
        <div class="example">
            <h3>术语定义标签</h3>
            <div class="code">
                &lt;!-- 缩写 --&gt;<br>
                &lt;p&gt;&lt;abbr title="超文本标记语言"&gt;HTML&lt;/abbr&gt; 是用于创建网页的标准标记语言。&lt;/p&gt;<br><br>
                
                &lt;!-- 定义列表 --&gt;<br>
                &lt;dl&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;HTML&lt;/dt&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;超文本标记语言，用于创建网页。&lt;/dd&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dt&gt;CSS&lt;/dt&gt;<br>
                &nbsp;&nbsp;&nbsp;&nbsp;&lt;dd&gt;层叠样式表，用于设计网页样式。&lt;/dd&gt;<br>
                &lt;/dl&gt;
            </div>
            
            <div class="preview">
                <p><abbr title="超文本标记语言" style="border-bottom: 1px dotted;">HTML</abbr> 是用于创建网页的标准标记语言。</p>
                
                <dl>
                    <dt style="font-weight: bold;">HTML</dt>
                    <dd style="margin-left: 30px;">超文本标记语言，用于创建网页。</dd>
                    
                    <dt style="font-weight: bold;">CSS</dt>
                    <dd style="margin-left: 30px;">层叠样式表，用于设计网页样式。</dd>
                </dl>
            </div>
            
            <h3>使用说明：</h3>
            <ul>
                <li><strong>&lt;blockquote&gt;</strong> 用于较长的引用内容</li>
                <li><strong>&lt;q&gt;</strong> 用于短的行内引用</li>
                <li><strong>&lt;cite&gt;</strong> 用于引用的作品标题</li>
                <li><strong>&lt;abbr&gt;</strong> 用于定义缩写，title 属性提供完整描述</li>
                <li><strong>&lt;dl&gt;</strong> 定义列表，包含术语 <strong>&lt;dt&gt;</strong> 和描述 <strong>&lt;dd&gt;</strong></li>
            </ul>
        </div>
    </section>
    
    <section>
        <h2>文本标签的最佳实践</h2>
        <ul>
            <li>根据内容的层级结构使用适当的标题标签</li>
            <li>使用语义化标签传达内容的含义，而不仅仅是为了样式</li>
            <li>使用 CSS 控制文本的视觉效果，而不是使用过时的 HTML 格式化标签</li>
            <li>确保引用内容使用适当的引用标签</li>
            <li>为缩写提供完整的描述，提高可访问性</li>
            <li>使用定义列表组织术语和定义</li>
        </ul>
    </section>
    
    <footer>
        <p>&copy; 2023 HTML5 学习指南。保留所有权利。</p>
    </footer>
</body>
</html>